import React from 'react';
import ReactDom from 'react-dom';
import { changeNav } from '../../../actions';
import { connect } from 'react-redux';
import { Button, List, WhiteSpace, Switch, Checkbox, Popup, Icon, Toast } from 'antd-mobile';
import { ajaxPost } from 'wxAjaxUtil';
// import CSSModules from 'react-css-modules';
import hhistory from '../../../history';
import styles from './dcConfig.less';
const Item = List.Item;
const CheckboxItem = Checkbox.CheckboxItem;
// @CSSModules(styles, { allowMultiple: true })
let selectIcon = require('../../../components/assets/icon_gg_duigou.svg');
let unSelectIcon = require('../../../components/assets/icon_gg_duigouweixuan.svg');
let modelOptionSelect = require('../../../components/assets/icon_gg_duoxuan_2.svg');
let modelOptionUnSelect = require('../../../components/assets/icon_gg_duoxuan_1.svg');
let dcModes = [
    { orderMode: 0, name: "点餐后支付", state: false, contents: [{ alias: 'orderSweepCode', name: '桌号扫码', state: false }, { alias: 'orderInputCode', name: '输入桌号', state: false }, { alias: 'serviceSweepCode', name: '服务员扫码确认', state: false }, { alias: 'isDinNum', name: '人数必填', state: false }, { alias: 'ordRemFlg', name: '整单备注', state: false }, { alias: 'isPrt', name: '自动厨打', state: false }] },
    { orderMode: 1, name: "即支付-服务员送餐", state: false, contents: [{ alias: 'orderSweepCode', name: '桌号扫码', state: false }, { alias: 'orderInputCode', name: '输入桌号', state: false }, { alias: 'isDinNum', name: '人数必填', state: false }, { alias: 'ordRemFlg', name: '整单备注', state: false }] },
    { orderMode: 2, name: "即支付-叫号自取", state: false, contents: [{ alias: 'isDinNum', name: '人数必填', state: false }, { alias: 'ordRemFlg', name: '整单备注', state: false }] },
    { orderMode: 3, name: "即支付-打票自取", state: false, contents: [{ alias: 'isDinNum', name: '人数必填', state: false }, { alias: 'ordRemFlg', name: '整单备注', state: false }] }
];
let storeInfo = null;
class DcConfig extends React.Component {
    constructor(props) {
        super(props);
    }
    state = {
        isChecked: false,
        vesion: 0,
        dcxdValue: '',//点餐订单引导语
        dcggValue: '',//点餐页面公告信息
        selectIndex: 0  //点餐模式选择的索引
    }

    componentWillMount() {
        var that = this;
        var { storeCode } = this.props.params;
        if (storeCode) {
            storeInfo = [storeCode];
        } else {
            var locationStoreCode = this.props.location.state.storeCode;
            storeInfo = locationStoreCode;
        }
        if (!storeCode) {
            return;
        }

        ajaxPost('/o2o/sly/conf/load/zhct/order', { 'storeCode': storeCode }, 'wxApiPath').then(res => {
            if (res.errorCode == 200) {
                var loadData = res.data;
                /*  $scope.isChecked = !!loadData.orderFlg;
                 $scope.vesion = !!loadData.orderVer;
                 $scope.dcxdValue = loadData.orderNotice;
                 $scope.dcggValue = loadData.noticeDesp; */
                dcModes[loadData.orderMode].state = true;

                for (var i = 0; i < dcModes[loadData.orderMode].contents.length; i++) {
                    switch (dcModes[loadData.orderMode].contents[i].alias) {
                        case 'orderSweepCode':
                            dcModes[loadData.orderMode].contents[i].state = !!loadData.orderSweepCode;
                            break;
                        case 'orderInputCode':
                            dcModes[loadData.orderMode].contents[i].state = !!loadData.orderInputCode;
                            break;
                        case 'serviceSweepCode':
                            dcModes[loadData.orderMode].contents[i].state = !!loadData.serviceSweepCode;
                            break;
                        case 'isPrt':
                            dcModes[loadData.orderMode].contents[i].state = !!loadData.isPrt;
                            break;
                        case 'isDinNum':
                            dcModes[loadData.orderMode].contents[i].state = !!loadData.isDinNum;
                            break;
                        case 'ordRemFlg':
                            dcModes[loadData.orderMode].contents[i].state = !!loadData.ordRemFlg;
                            break;
                    }
                }
                that.setState({ selectIndex: loadData.orderMode, isChecked: !!loadData.orderFlg, vesion: loadData.orderVer, dcxdValue: loadData.orderNotice, dcggValue: loadData.noticeDesp });
            } else {
                Toast.fail(res.errorText, 2);
            }
        }).catch(err => {
            Toast.fail(err.message, 2);
        });
    }
    componentDidMount() {
        this.props.tochangeNav({
            title: "点餐设置", rbtn: [
                <Button key="1" type="primary" inline onClick={() => this.saveDataEvent()} size="small">确定</Button>
            ]
        });

    }
    saveDataEvent() {
        var saveData = {};
        saveData.storeInfo = storeInfo;
        var { isChecked, vesion, dcxdValue, dcggValue, selectIndex } = this.state;
        saveData.orderFlg = isChecked ? 1 : 0;
        saveData.orderVer = vesion;
        saveData.orderNotice = dcxdValue;
        saveData.noticeDesp = dcggValue;
        saveData.orderMode = selectIndex;
        var options = dcModes[selectIndex].contents;
        options.forEach(o => {
            saveData[o.alias] = o.state ? 1 : 0;
        });
        console.log(saveData)
        ajaxPost('/o2o/sly/conf/apply/zhct/order', saveData, 'wxApiPath').then(res => {
            if (res.errorCode == 200) {
                Toast.success('保存成功', 2);
            } else {
                Toast.fail('操作失败，请重试', 2);
            }
        }).catch(err => {
            Toast.fail(err.message, 2);
        });

    }
    versionSelect(key) {
        this.setState({ vesion: key });
    }
    modelSelect(index) {
        var oldIndex = this.state.selectIndex;
        dcModes[oldIndex].state = false;
        dcModes[index].state = true;
        this.setState({ selectIndex: index });
        Popup.hide();
    }
    showModelSelect() {
        Popup.show(<List>
            {
                dcModes.map((item, i) => {
                    return <Item key={i} thumb={<Icon type={item.state ? selectIcon : unSelectIcon} />} onClick={() => { this.modelSelect(i) }}>{item.name}</Item>
                })
            }
        </List>, { animationType: 'slide-up' })
    }
    toggleModelOption(index) {
        var item = dcModes[this.state.selectIndex]['contents'][index];
        item.state = !item.state;
        this.forceUpdate();
    }
    setValue(evt, key) {
        var target = evt.target;
        var v = target.value;
        this.setState({ [key]: v });
    }
    render() {
        let ctrl = this;
        return (
            <div>
                <WhiteSpace size="lg" />
                <List>
                    <Item arrow="horizontal" extra={<div className={styles.red}>{storeInfo.length}个</div>}><span className={styles.titleSize}>已选门店</span></Item>
                </List>
                <WhiteSpace size="lg" />
                <List>
                    <Item extra={<Switch className="mySwitch" checked={this.state.isChecked} onClick={(v) => { this.setState({ isChecked: !this.state.isChecked }) }} />}>
                        <span className={styles.titleSize}>开启点餐</span>
                    </Item>
                </List>
                <WhiteSpace size="lg" />
                <List renderHeader="基本信息" className="whiteHeader">
                    <Item>
                        <div className={styles.versionSelect}>
                            <div className={styles.versionText}>版本</div>
                            <div className={styles.versionBtnWrap}><div className={ctrl.state.vesion == 0 ? styles.versionBtnActive : styles.versionBtn} onClick={() => ctrl.versionSelect(0)}>旧版本</div><div className={styles.split} /><div className={ctrl.state.vesion == 1 ? styles.versionBtnActive : styles.versionBtn} onClick={() => ctrl.versionSelect(1)}>新版本</div></div>
                        </div>
                    </Item>
                    <Item extra={<span className={styles.titleSize}>{dcModes[this.state.selectIndex]['name']}</span>} arrow="horizontal" onClick={() => this.showModelSelect()}>
                        <span className={styles.titleSize}>点餐模式</span>
                    </Item>
                    <Item multipleLine>
                        <div className={styles.optionsWrap}>
                            {
                                dcModes[this.state.selectIndex]['contents'].map((item, i) => {
                                    return <div key={i} className={styles.option} onClick={() => this.toggleModelOption(i)}><Icon type={item.state ? modelOptionSelect : modelOptionUnSelect} /><span className={styles.optionText}>{item.name}</span></div>
                                })

                            }
                        </div>
                    </Item>
                </List>
                <WhiteSpace size="lg" />
                <List renderHeader="点餐下单提示语" className="whiteHeader">
                    <Item multipleLine>
                        <textarea placeholder="50字以内" className={styles.dishTips} value={this.state.dcxdValue} onChange={(evt) => { this.setValue(evt, 'dcxdValue') }}></textarea>
                    </Item>
                </List>
                <WhiteSpace size="lg" />
                <List renderHeader="点餐公告" className="whiteHeader">
                    <Item multipleLine>
                        <textarea placeholder="100字以内" className={styles.dishContent} value={this.state.dcggValue} onChange={(evt) => { this.setValue(evt, 'dcggValue') }}></textarea>
                    </Item>
                </List>
            </div>
        )
    }

}

const mapStateToProps = (state) => ({

})
const mapDispatchToProps = (dispatch) => ({
    tochangeNav: navogj => dispatch(changeNav(navogj))
})

export default connect(mapStateToProps, mapDispatchToProps)(DcConfig)